<!--
 * @Description: 线路控制显示与隐藏
 * @Author: your name
 * @Date: 2024-09-11 11:26:08
 * @version: 
 * @LastEditors: your name
 * @LastEditTime: 2024-09-11 17:02:13
-->
<template>
     <div class="item-wrapper">
                <div class="item" @click="controlAll()">
                    <div class="box" :style="{ borderColor: 'gray', backgroundColor: 'gray' }">
                      <img src="../assets/对号.svg" alt="对勾" class="duihao" v-if="allChecked">
                    </div>
                    <span :style="{ color: '#34c5cf' }">全选</span>
                </div>
                <div class="item" v-for="item in lineData" @click="chooseLine(item)">
                     <div class="box" :class="{ borderColor: item.color, backgroundColor: item.color }">
                        <img src="../assets/对号.svg" alt="对勾" :class="[item.name=='轨道交通1号线'?'duihao1':'',item.name=='轨道交通2号线'?'duihao2':'',item.name=='轨道交通3号线'?'duihao3':'',item.name=='轨道交通4号线'?'duihao4':'',item.name=='轨道交通5号线'?'duihao5':'',item.name=='轨道交通6号线'?'duihao6':'',item.name=='轨道交通7号线'?'duihao7':'',item.name=='轨道交通8号线'?'duihao8':'']" v-if="item.checked||allChecked">
                </div>
                <span :style="{ color: '#34c5cf' }">{{ item.name.slice(-3) }}</span>
            </div>
     </div>
</template>

<script setup>
 import {useLineData} from "@/store/index";
 import { displayByName, changeDisplayBillBoard } from "../cesiumTools/material/effectController";
 import { computed, toRefs } from "vue";
 const { lineData } =toRefs( useLineData());
let allChecked = true;
 // 全选，控制所有站点，站线
const controlAll = () => {
    allChecked = !allChecked
    const checked = allChecked
    const lineNames = lineData.value.map(item => item.name)
    const stationNames = []
    lineData.value.forEach(item => {
        const { stationsList } = item
        stationsList.forEach(station => {
            stationNames.push(station.name)
        })
    })
    // 控制地图元素显示隐藏
    displayByName(lineNames, stationNames, checked)
    changeDisplayBillBoard(stationNames,checked)
    
    // 控制ui面板显示隐藏
    lineData.value = lineData.value.map(item => {
        item.checked = checked
        return item
    })
}

// 单独控制站线
const chooseLine = (item) => {
    console.log(item);
    //1.将全选状态改为false
    if(allChecked){
      allChecked = false;
    }
    const names = [item.name]
    const stationNames = item.stationsList.map(station => station.name)
    // 控制ui面板显示隐藏
    item.checked = !item.checked
    // 控制地图元素显示隐藏
    displayByName(names, stationNames, item.checked)
    changeDisplayBillBoard(stationNames,item.checked)
}

</script>

<style scoped>
.box {
    width: 10px;
    height: 10px;
    border-width: 1px;
    border-style: solid;
    background: transparent;
    user-select: all;
    cursor: pointer;
}

.duihao {
    position: absolute;
    top: 15px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.duihao1 {
    position: absolute;
    top: 35px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.duihao2 {
    position: absolute;
    top: 55px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.duihao3 {
    position: absolute;
    top: 75px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.duihao4 {
    position: absolute;
    top: 95px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.duihao5 {
    position: absolute;
    top: 115px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.duihao6 {
    position: absolute;
    top: 135px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.duihao7 {
    position: absolute;
    top: 155px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.duihao8 {
    position: absolute;
    top: 175px;
    left: 14px;
    width: 10px; 
    height: 10px
}

.item {
    width: 65px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #885f12;
    color: #fff;
    font-size: 10px;
    pointer-events: all;
    cursor: pointer;
}

.item:hover {
    border: 1px solid #d8961a;
}

.item>span {
    line-height: 9.005px;
}

.item>input {
    outline: none;
    border: none;
    transition: all 0.3s ease;
}

.item-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-around;
    flex-wrap: wrap;
    flex: 1;
    background-color: rgba(0, 0, 0, 0.3);
}

</style>